<template>
  <el-date-picker
    v-bind="defaultAttr"
    v-model="modelValue"
    range-separator="至"
    style="width: 100%"
    clearable
    unlink-panels
  />
</template>

<script setup>
const typeMap = {
  datetime: { label: '时间', format: 'YYYY-MM-DD HH:mm:ss' },
  date: { label: '日期', format: 'YYYY-MM-DD' },
  month: { label: '月份', format: 'YYYY-MM' },
}
// v-model值
const modelValue = defineModel()

// 输入框配置项
const props = defineProps({
  config: {
    type: Object,
    default: () => {},
  },
})

const defaultAttr = computed(() => {
  // 设置默认绑定值
  let { attrs = {} } = props.config
  // 获取默认项
  const typeName = props.config.type
  attrs['start-placeholder'] = attrs?.placeholder || `请选择开始${typeMap[typeName].label}`
  attrs['end-placeholder'] = attrs?.placeholder || `请选择结束${typeMap[typeName].label}`
  attrs['format'] = props.config?.format || typeMap[typeName].format
  attrs['value-format'] = props.config?.format || typeMap[typeName].format
  attrs['type'] = `${typeName}range`
  return { ...attrs }
})
</script>

<style lang="scss" scoped></style>
